<template>
  <div class="main-container">
    <a-row :gutter="10">
      <a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" :xxl="6" v-for="(item, index) of dataList" :key="index"
        class="item-wrapper">
        <DataItem :data-model="item">
          <template v-if="index === 0" #extra="{ extra }">
            <div class="mt-4 text-xs">
              <div> 今天数量：{{ extra.data }} 件</div>
              <div class="mt-2"> 较上昨天新增：{{ extra.data1 }} 件</div>
              <div class="mt-3"> 较上周新增：{{ extra.data2 }} 件</div>
            </div>
          </template>
          <template v-else-if="index === 1" #extra="{ extra }">
            <div class="mt-4 text-xs" style="position: relative">
              <div> 较昨日新增：{{ extra.data }} 件</div>
              <div class="mt-2"> 较上周新增：{{  extra.data1 }} 件</div>
              <div class="stack-avatar-wrapper"> </div>
            </div>
          </template>
          <template v-else-if="index === 2" #extra="{ extra }">
            <div class="p-4">
              <a-progress :percent="extra.data" />
            </div>
          </template>
          <template v-else-if="index === 3" #extra>
            <OrderChart ref="mOrderChart" />
          </template>
        </DataItem>
      </a-col>
    </a-row>
    <div class="mt-2"></div>
    <a-row :gutter="10">
      <a-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16" :xxl="16">
        <a-space direction="vertical" style="width: 100%">
          <FullYearSalesChart ref="fullYearSalesChart" />
          <div class="flex w-full">
            <DepartmentChart class="flex-1" ref="departmentChart" />
            <div style="width: 8px"></div>
            <EnrollmentChannelsChart class="flex-1" ref="mOrderChart" />
          </div>
        </a-space>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :xxl="8">
        <a-space direction="vertical" style="width: 100%">
          <SalesChart ref="salesChart" />
          <StudentChart ref="enrollmentChannelsChart" />
        </a-space>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import DataItem from './components/DataItem.vue'
// import OrderChart from './components/chart/OrderChart.vue'
// import SalesChart from './components/chart/SalesChart.vue'
// import StudentChart from './components/chart/StudentChart.vue'
// import EnrollmentChannelsChart from './components/chart/EnrollmentChannelsChart.vue'
// import FullYearSalesChart from './components/chart/FullYearSalesChart.vue'
// import DepartmentChart from './components/chart/DepartmentChart.vue'
import { computed, defineComponent, ref, watch } from 'vue'
import useAppConfigStore from '@/store/modules/app-config'
import { toRaw, onMounted,  reactive } from 'vue'
import {post} from "@/api/http";
export default defineComponent({
  name: 'Home',
  components: {
    DataItem,
    OrderChart,
    SalesChart,
    StudentChart,
    EnrollmentChannelsChart,
    FullYearSalesChart,
    DepartmentChart,
  },
  setup() {
    const appStore = useAppConfigStore()
    const mOrderChart = ref<InstanceType<typeof OrderChart>>()
    const salesChart = ref<InstanceType<typeof SalesChart>>()
    const enrollmentChannelsChart = ref<InstanceType<typeof EnrollmentChannelsChart>>()
    const studentChart = ref<InstanceType<typeof StudentChart>>()
    const fullYearSalesChart = ref<InstanceType<typeof FullYearSalesChart>>()
    const departmentChart = ref<InstanceType<typeof DepartmentChart>>()
    const onResize = () => {
      setTimeout(() => {
        mOrderChart.value?.updateChart()
        salesChart.value?.updateChart()
        enrollmentChannelsChart.value?.updateChart()
        studentChart.value?.updateChart()
        fullYearSalesChart.value?.updateChart()
        departmentChart.value?.updateChart()
      }, 500)
    }
    const collapse = computed(() => {
      return appStore.isCollapse
    })
    watch(collapse, () => {
      onResize()
    })
    // 加载

    onMounted(() => {
      setInterval(cpnum,60000);
    })

    function cpnum() {
      post({
        url: 'StockReport/getProductNum'
      }).then((resp) => {

        dataList.value=resp.data


      })
    }
   const dataList= ref( [
      {

        title: '产品数量',
        data: '1',
        prefix: '+',
        extra: {
          data: 1000,
          data1: 2350,
          data2: 1
        },
      },
      {

        title: '入库数量',
        data: '500',
        suffix: '个',
        prefix: '+',
        extra: {
          data: 700,
          data1: 968,
        },
      },
      {

        title: '出库数量',
        data: '50000',
        suffix: '个',
        prefix: '-',
        extra: {
          data: 0.8,
        },
      },
      {

        title: '库存数量',
        data: '189',
        suffix: '个',
        extra: {
          data: 80,
        },
      },
    ]);
    return {
      dataList,
      cpnum,
      collapse,
      mOrderChart,
      salesChart,
      enrollmentChannelsChart,
      studentChart,
      departmentChart,
      fullYearSalesChart

    }
  },
})
</script>
